<!DOCTYPE html>
<html
  layout:decorator="components/layout"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  xmlns:th="http://www.thymeleaf.org"
>
<head>
  <title>VPN管理</title>
</head>
<body>
<div
  layout:fragment="content"
  class="container"
>
  <div id="app" v-cloak>
    <!--引入边框角-->
    <div th:replace="components/common-border-bg::common-border-bg"></div>
    <div class="con_mid">
      <div class="section-title"><i class="tit_ico1"></i>VPN管理信息</div>
      <div class="main_mode" style="display: block;">
        <table
          width="100%"
          border="0"
          cellpadding="0"
          cellspacing="0"
          class="frame-table"
        >
          <tbody>
          <tr>
            <td width="200" class="TitleTD">隧道名<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|max:50'" class="input_text" name="tunnelName" v-model="formData.tunnelName"
                     size="45" value="" title="请填写隧道名">
              <span class="field-error" v-show="errors.has('tunnelName')">{{ errors.first('tunnelName') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">预共享密钥<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|max:32'" class="input_text" name="preShareKey" v-model="formData.preShareKey"
                     size="45" value="" title="请填写预共享密钥">
              <span class="field-error" v-show="errors.has('preShareKey')">{{ errors.first('preShareKey') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">本地标识<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|max:50'" class="input_text" name="localId" v-model="formData.localId"
                     size="45"
                     value="" title="请填写本地标识">
              <span class="field-error" v-show="errors.has('localId')">{{ errors.first('localId') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">对方标识<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|max:50'" class="input_text" name="parnerId" v-model="formData.parnerId"
                     size="45"
                     value="" title="请填写对方标识">
              <span class="field-error" v-show="errors.has('parnerId')">{{ errors.first('parnerId') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">本地IP地址或主机<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|ip|max:64'" class="input_text" name="localIp" v-model="formData.localIp"
                     size="45"
                     value="" title="请填写本地IP地址或主机">
              <span class="field-error" v-show="errors.has('localIp')">{{ errors.first('localIp') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">对方IP地址或主机<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|ip|max:64'" class="input_text" name="parnerIp" v-model="formData.parnerIp"
                     size="45"
                     title="请填写对方IP地址或主机">
              <span class="field-error" v-show="errors.has('parnerIp')">{{ errors.first('parnerIp') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">IKE协商模式<span style="color: red">*</span></td>
            <td class="ContentTD" title="请选择IKE协商模式">
              <select v-validate="'required'" name="ikeMode" v-model="formData.ikeMode" style="width:105px;"
                      title="请选择IKE协商模式">
                <option value="1">野蛮模式</option>
                <option value="2">主模式</option>
              </select>
              <span class="field-error" v-show="errors.has('ikeMode')">{{ errors.first('ikeMode') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">ISAKMP-SA的安全政策属性<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|max:200'" class="input_text" disabled name="isakmpPolicyValue"
                     v-model="formData.isakmpPolicyValue" size="45" value="3des-sha1-modp1024"
                     title="">
              <input class="button" type="button" value="<-" @click="addType"/>
              <input class="botton" type="button" value="清除" @click="cleanType"/>
              <select name="ike_ept_type" v-model="formData.ike_ept_type" style="width:52px">
                <option :value="'3des'">3DES</option>
                <option :value="'aes'">AES</option>
                <option :value="'des'">DES</option>
              </select> -
              <select name="ike_hash_type" v-model="formData.ike_hash_type" style="width:50px">
                <option :value="'sha1'">SHA1</option>
                <option :value="'md5'">MD5</option>
              </select> -
              <select name="ike_dh_type" v-model="formData.ike_dh_type" style="width:50px">
                <option :value="'modp768'">DH1</option>
                <option :value="'modp1024'">DH2</option>
                <option :value="'modp1536'">DH5</option>
              </select>
              <span class="field-error"
                    v-show="errors.has('isakmpPolicyValue')">{{ errors.first('isakmpPolicyValue') }}</span>
            </td>
          </tr>
          </tbody>
        </table>
        <table
          width="100%"
          border="1"
          cellpadding="0"
          cellspacing="0"
          class="frame-table"
        >
          <tbody>
          <tr>
            <td width="200" class="TitleTD">本地子网<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|ip|max:50'" class="input_text" name="localSubnet"
                     v-model="formData.localSubnet"
                     size="45" value="" title="请填写本地子网">
              <span class="field-error" v-show="errors.has('localSubnet')">{{ errors.first('localSubnet') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">本地掩码<span style="color: red">*</span></td>
            <td class="ContentTD">
              <select v-validate="'required'" name="localMask" v-model="formData.localMask" style="width:280px;">
                <option :value="0">/0 - 0.0.0.0</option>
                <option :value="1">/1 - 128.0.0.0</option>
                <option :value="2">/2 - 192.0.0.0</option>
                <option :value="3">/3 - 224.0.0.0</option>
                <option :value="4">/4 - 240.0.0.0</option>
                <option :value="5">/5 - 248.0.0.0</option>
                <option :value="6">/6 - 252.0.0.0</option>
                <option :value="7">/7 - 254.0.0.0</option>
                <option :value="8">/8 - 255.0.0.0</option>
                <option :value="9">/9 - 255.128.0.0</option>
                <option :value="10">/10 - 255.192.0.0</option>
                <option :value="11">/11 - 255.224.0.0</option>
                <option :value="12">/12 - 255.240.0.0</option>
                <option :value="13">/13 - 255.248.0.0</option>
                <option :value="14">/14 - 255.252.0.0</option>
                <option :value="15">/15 - 255.254.0.0</option>
                <option :value="16">/16 - 255.255.0.0</option>
                <option :value="17">/17 - 255.255.128.0</option>
                <option :value="18">/18 - 255.255.192.0</option>
                <option :value="19">/19 - 255.255.224.0</option>
                <option :value="20">/20 - 255.255.240.0</option>
                <option :value="21">/21 - 255.255.248.0</option>
                <option :value="22">/22 - 255.255.252.0</option>
                <option :value="23">/23 - 255.255.254.0</option>
                <option :value="24" selected="">/24 - 255.255.255.0</option>
                <option :value="25">/25 - 255.255.255.128</option>
                <option :value="26">/26 - 255.255.255.192</option>
                <option :value="27">/27 - 255.255.255.224</option>
                <option :value="28">/28 - 255.255.255.240</option>
                <option :value="29">/29 - 255.255.255.248</option>
                <option :value="30">/30 - 255.255.255.252</option>
                <option :value="31">/31 - 255.255.255.254</option>
                <option :value="32">/32 - 255.255.255.255</option>
              </select>
              <span class="field-error" v-show="errors.has('localMask')">{{ errors.first('localMask') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">对方子网<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|ip|max:50'" class="input_text" name="parnerSubnet"
                     v-model="formData.parnerSubnet"
                     size="45" value="192.168.0.0" title="请填写对方子网">
              <span class="field-error" v-show="errors.has('parnerSubnet')">{{ errors.first('parnerSubnet') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">对方掩码<span style="color: red">*</span></td>
            <td class="ContentTD">
              <select v-validate="'required'" name="parnerMask" v-model="formData.parnerMask" style="width:280px;">
                <option :value="0">/0 - 0.0.0.0</option>
                <option :value="1">/1 - 128.0.0.0</option>
                <option :value="2">/2 - 192.0.0.0</option>
                <option :value="3">/3 - 224.0.0.0</option>
                <option :value="4">/4 - 240.0.0.0</option>
                <option :value="5">/5 - 248.0.0.0</option>
                <option :value="6">/6 - 252.0.0.0</option>
                <option :value="7">/7 - 254.0.0.0</option>
                <option :value="8">/8 - 255.0.0.0</option>
                <option :value="9">/9 - 255.128.0.0</option>
                <option :value="10">/10 - 255.192.0.0</option>
                <option :value="11">/11 - 255.224.0.0</option>
                <option :value="12">/12 - 255.240.0.0</option>
                <option :value="13">/13 - 255.248.0.0</option>
                <option :value="14">/14 - 255.252.0.0</option>
                <option :value="15">/15 - 255.254.0.0</option>
                <option :value="16" selected="">/16 - 255.255.0.0</option>
                <option :value="17">/17 - 255.255.128.0</option>
                <option :value="18">/18 - 255.255.192.0</option>
                <option :value="19">/19 - 255.255.224.0</option>
                <option :value="20">/20 - 255.255.240.0</option>
                <option :value="21">/21 - 255.255.248.0</option>
                <option :value="22">/22 - 255.255.252.0</option>
                <option :value="23">/23 - 255.255.254.0</option>
                <option :value="24">/24 - 255.255.255.0</option>
                <option :value="25">/25 - 255.255.255.128</option>
                <option :value="26">/26 - 255.255.255.192</option>
                <option :value="27">/27 - 255.255.255.224</option>
                <option :value="28">/28 - 255.255.255.240</option>
                <option :value="29">/29 - 255.255.255.248</option>
                <option :value="30">/30 - 255.255.255.252</option>
                <option :value="31">/31 - 255.255.255.254</option>
                <option :value="32">/32 - 255.255.255.255</option>
              </select>
              <span class="field-error" v-show="errors.has('parnerMask')">{{ errors.first('parnerMask') }}</span>
            </td>
          </tr>
          <tr>
            <td class="TitleTD">IPSEC-SA的安全政策属性<span style="color: red">*</span></td>
            <td class="ContentTD">
              <input v-validate="'required|max:200'" class="input_text" disabled name="ipsecSASecPolicy"
                     v-model="formData.ipsecSASecPolicy" size="45">
              <input class="button" type="button" value="<-" @click="addType2">
              <input class="botton" type="button" value="清除" @click="cleanType2">
              <select name="ike_ept_type1" v-model="formData.ike_ept_type1" style="width:52px">
                <option :value="'3des'">3DES</option>
                <option :value="'aes'">AES</option>
                <option :value="'des'">DES</option>
              </select> -
              <select name="ike_hash_type1" v-model="formData.ike_hash_type1" style="width:50px">
                <option :value="'sha1'">SHA1</option>
                <option :value="'md5'">MD5</option>
              </select> -
              <select name="ike_dh_type1" v-model="formData.ike_dh_type1" style="width:50px">
                <option :value="'modp768'">DH1</option>
                <option :value="'modp1024'">DH2</option>
                <option :value="'modp1536'">DH5</option>
              </select>
              <span class="field-error"
                    v-show="errors.has('ipsecSASecPolicy')">{{ errors.first('ipsecSASecPolicy') }}</span>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div align="center">
        <input class="btn_submit" type="button" @click="submitForm" value="确认">
        <input type="button" class="btn_submit" @click="restForm" value="重置">
      </div>
    </div>
  </div>
</div>
<div layout:fragment="js">
  <script src="/static/js/module/network-config/api/netVpnInfoApi.js"></script>
  <script src="/static/js/module/network-config/modify/admin_vpn_modify.js"></script>
</div>
</body>
</html>
